<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料修改</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            background-color: #ff5000;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            display: flex;
            align-items: center;
        }
        .navbar .logo span {
            margin-left: 10px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }
        .search-bar {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .search-bar input {
            width: 500px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
        }
        .search-bar button {
            padding: 10px;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 0 5px 5px 0;
        }
        .content-box {
            display: flex;
            padding: 20px;
        }
        .left-nav {
            width: 20%;
            background-color: #f5f5f5;
            padding: 10px;
        }
        .left-nav a {
            display: block;
            text-decoration: none;
            color: #333;
            padding: 10px 20px;
            margin: 5px 0;
            background-color: #fff;
            border-radius: 5px;
        }
        .left-nav a.active, .left-nav a:hover {
            background-color: #ff5000;
            color: white;
        }
        .right-content {
            width: 75%;
            margin-left: 5%;
        }
        .right-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .btn-submit {
            padding: 10px 20px;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn-submit:hover {
            background-color: #e04c00;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="logo">机械工业</div>
    <div class="nav-links">
        <a id="index1Link" href="#">首页</a>

    </div>
</div>

<div class="search-bar">
    <input type="text" placeholder="搜索商品、店铺">
    <button>搜索</button>
</div>

<div class="content-box">
    <div class="left-nav">
        <a id="userMessageLink" href="#">收货地址管理</a>
        <a id="orderlistLink" href="#" >我的订单</a>
        <a id="cartLink" href="#">我的购物车</a>
        <a id="information_modificationLink" href="#">个人资料</a>
        <a id="password_modificationLink" href="#">修改密码</a>
    </div>

    <div class="right-content">
        <div class="right-title">修改个人资料</div>
        <div id="userInfo">
            <!-- 用户信息表单将通过AJAX加载 -->
        </div>
    </div>
</div>

<script>
    function getUserIdFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
    }

    const userId = getUserIdFromUrl();
    const index1Link = document.getElementById("index1Link");
    const userMessageLink = document.getElementById("userMessageLink");
    const cartLink = document.getElementById("cartLink");
    const orderlistLink = document.getElementById("orderlistLink");
    const information_modificationLink = document.getElementById("information_modificationLink");
    const password_modificationLink = document.getElementById("password_modificationLink");

    index1Link.href = `index1?id=${userId}`;
    userMessageLink.href = `userMessage?id=${userId}`;
    cartLink.href = `cart?id=${userId}`;
    orderlistLink.href = `orderlist?id=${userId}`;
    information_modificationLink.href = `information_modification?id=${userId}`;
    password_modificationLink.href = `password_modification?id=${userId}`;

    // 使用AJAX请求后端接口获取用户信息
    fetch(`/users/${userId}`)
        .then(response => response.json())
        .then(data => {
            // 将用户信息显示在表单中
            document.getElementById('userInfo').innerHTML = `
                <form id="userForm">
                    <div class="form-group">
                        <label for="account">账号</label>
                        <input type="text" id="account" name="account" value="${data.account}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" value="${data.name}">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" value="${data.email}">
                    </div>
                    <div class="form-group">
                        <label for="question">问题</label>
                        <input type="text" id="question" name="question" value="${data.question}">
                    </div>
                    <div class="form-group">
                        <label for="asw">答案</label>
                        <input type="text" id="asw" name="asw" value="${data.asw}">
                    </div>
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="text" id="phone" name="phone" value="${data.phone}">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="number" id="age" name="age" value="${data.age}">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select id="sex" name="sex">
                            <option value="1" ${data.sex === '1' ? 'selected' : ''}>男</option>
                            <option value="2" ${data.sex === '2' ? 'selected' : ''}>女</option>
                        </select>
                    </div>
                    <button type="submit" class="btn-submit">保存修改</button>
                </form>
            `;

            // 表单提交处理
            document.getElementById('userForm').addEventListener('submit', function(event) {
                event.preventDefault();
                var formData = new FormData(this);
                fetch(`/users/${userId}`, {
                    method: 'PATCH',
                    body: JSON.stringify(Object.fromEntries(formData)),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(result => {
                        if (result) {
                            alert('个人资料更新成功');
                        } else {
                            alert('更新失败，请稍后再试');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('更新失败，请稍后再试');
                    });
            });
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('userInfo').innerHTML = '<p>加载用户信息失败，请稍后再试。</p>';
        });
</script>


</body>
</html>
